﻿<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Câu cá sáu cao</title>

        <link rel="stylesheet" href="css/demo-styles.css" />
        <link rel="stylesheet" href="css/styles.css" />

    </head>

    <body>

        <div class="demo-wrapper">

            <!--// Gallery Markup: A container that the plugin is called upon, and two lists for the images (use images with same aspect ratio) //-->
            <div id="gallery-container">
                <h4>Thư viện ảnh</h4>  
                <ul class="items--small">
                    <?php
                    $files = array();
                    $dir = opendir('./images');
                    while ($f = readdir($dir)) {
                        if (preg_match("/(.*).jpg$/", $f)){
                            $files[]=$f;
                        }
                    }
                    closedir($dir);
                    $data = array();
                    if (!empty($files)) {
                        foreach ($files as $k => $v) {
                            echo '<li class="item"><a href="#"><img height="200px" width="200px" src="images/' . $v . '" width="500" /></a></li>';
                        }
                    }
                    ?>
                    <!--<li class="item"><a href="#"><img src="images/small-1.png" alt="" /></a></li>-->
                </ul>
                <ul class="items--big">
                    <?php
                    foreach ($files as $k => $v) {
                    ?>
                    <li class="item--big">
                        <a href="#">
                            <figure>
                                <img src="images/<?php echo $v ?>" alt="" />
                            </figure>
                        </a>
                    </li>
                    <?php } ?>
                </ul>
                <div class="controls">
                    <span class="control icon-arrow-left" data-direction="previous"></span> 
                    <span class="control icon-arrow-right" data-direction="next"></span> 
                    <span class="grid icon-grid"></span>
                    <span class="fs-toggle icon-fullscreen"></span>
                </div>
                <div id="But"><a href="../index.html">Quay lại trang chủ</a></div>
            </div>



        </div><!--end demo-wrapper-->

        <script src="../js/jquery-v1.8.3.js"></script>
        <script src="js/plugins.js"></script>
        <script src="js/scripts.js"></script>
        <script>
            $(document).ready(function() {
                $('#gallery-container').sGallery({
                    fullScreenEnabled: true
                });
            });
        </script>

    </body>
</html>